<template>
    <div class="speech">
        <!-- <h1 style="color: #f66;">预警配置</h1> -->

        <div class="keyWordBox">
            <div class="keyWordForm"> 
                <div class="titleForm">宿舍配置</div>
                <el-form :model="form" label-width="auto" style="max-width: 600px">

                    <el-form-item label="聚集人数:">
                        <el-input v-model="form.frequency" />
                    </el-form-item>

                    <el-form-item label="聚集时间：">
                        <el-input v-model="form.keyWord" />
                    </el-form-item>

                    <el-form-item label="监测时间(上午)：">
                        <el-time-picker
                            v-model="value1"
                            is-range 
                            range-separator="到"
                            start-placeholder="Start time"
                            end-placeholder="End time"
                            size = 'small'
                            />
                    </el-form-item>
                    <el-form-item label="监测时间(下午)：">
                        <el-time-picker
                            v-model="value2"
                            is-range 
                            range-separator="到"
                            start-placeholder="Start time"
                            end-placeholder="End time"
                            size = 'small'
                            />
                    </el-form-item>
                    <el-form-item class="lastFormItem">
                        <el-button type="primary" @click="onSubmit">保存设置</el-button>
                        <el-button @click="clearAway">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <div class="keyWordBox">
           <div class="keyWordForm">
                <div class="titleForm">厕所配置</div>
                <el-form :model="form" label-width="auto" style="max-width: 600px">

                    <el-form-item label="聚集人数:">
                        <el-input v-model="form.frequency" />
                    </el-form-item>

                    <el-form-item label="聚集时间：">
                        <el-input v-model="form.keyWord" />
                    </el-form-item>

                    <el-form-item class="lastFormItem">
                        <el-button type="primary" @click="onSubmit">保存设置</el-button>
                        <el-button @click="clearAway">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script setup>
import { reactive, ref } from 'vue'

const value1 = ref<[Date, Date]>([
  new Date(2016, 9, 10, 8, 40),
  new Date(2016, 9, 10, 9, 40),
])

const value2 = ref<[Date, Date]>([
  new Date(2016, 9, 10, 8, 40),
  new Date(2016, 9, 10, 9, 40),
])

const form = reactive({
  keyWord: '', 
  frequency: '', 
  resource: '', 
})

const onSubmit = () => {
  console.log('submit!')
  console.log(form)
}

const clearAway = () =>{ 
    for(let i in form){ 
        form[i] = ''
    }
}

const handleDelete = (index,row) => {
    console.log(index,row)
}
</script>

<style scoped>
 .speech {
    flex-direction: row;
}
.keyWordBox{
    height: 450px;
    width: 600px;
    border: 1px solid rgb(0, 196, 215);
    padding: 20px 10px;
}
.keyWordBox:nth-child(1){
     margin-right: 10px;
}
.keyWordForm{
    width: 100%;
    height: 100%;
    text-align: center
}

.titleForm{
    margin-bottom: 15px;
    color: #0191e4;
    font-size: 20px;
    display: inline-block;
    max-width: 100%;
    font-weight: 700;
}

.el-form-item{
    justify-content: center;
}
::v-deep .el-radio__label{
    justify-content: center;
    color: #0191e4;
    font-size: 18px;
}
::v-deep .el-form-item__label{
    font-weight: 700;
    font-size: 18px;
    color: #0191e4;
}
::v-deep .el-form-item__content{
    flex: none;
}
::v-deep .lastFormItem .el-form-item__content{
    margin-left: 0 !important;
}
.el-button:hover{
    background-color: var(--el-button-hover-bg-color);
    border-color: var(--el-button-hover-border-color);
    color: var(--el-button-hover-text-color);
}
.el-table--fit{
    background-color: transparent;
}
</style>